<template>
  <div class="container">
    <div class="profile-section">
      <image-preview :src="dataList.avatarUrl" :width="120" :height="120" class="profile-picture"/>
      <div class="user-info">
        <p class="user-id">{{ dataList.mobile }}</p>
        <el-button type="danger" size="small" class="membership-status">会员成员</el-button>
      </div>
    </div>

    <div class="details-section">
      <div class="details-column">
        <el-row v-for="(item, index) in leftColumnData" :key="index" class="detail-row">
          <el-col :span="8" class="label-col">{{ item.label }}</el-col>
          <el-col :span="16" class="value-col">{{ item.value }}</el-col>
        </el-row>
      </div>
      <div class="details-column">
        <el-row v-for="(item, index) in rightColumnData" :key="index" class="detail-row">
          <el-col :span="8" class="label-col">{{ item.label }}</el-col>
          <el-col :span="16" class="value-col">{{ item.value }}</el-col>
        </el-row>
      </div>
    </div>

    <div class="table-header">
      <el-row>
        <el-col :span="24"><h3>会员卡信息</h3></el-col>
      </el-row>
    </div>
    <el-table ref="multipleTable" :data="cardList" border class="table-spacing">
      <el-table-column  label="会员卡" width="550">次数卡</el-table-column>
      <el-table-column prop="userBuyNumberCard.residueNumber" label="次数" width="565" show-overflow-tooltip></el-table-column>
    </el-table>

    <div class="table-header">
      <el-row>
        <el-col :span="24"><h3>收货地址信息</h3></el-col>
      </el-row>
    </div>
    <el-table ref="multipleTable" :data="addressList[0].deliveryAddresses" border class="table-spacing">
      <el-table-column prop="consignee" label="姓名" width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="手机" width="215"></el-table-column>
      <el-table-column prop="fullAddress" label="详细地址" width="479" show-overflow-tooltip></el-table-column>
      <el-table-column prop="zipCode" label="邮政编码" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column
        prop="fixed"
        label="默认地址"
        width="100"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.fixed === 0 ? '默认' : '非默认' }}
        </template>
      </el-table-column>
    </el-table>

    <div class="table-header">
      <el-row>
        <el-col :span="24"><h3>订单信息</h3></el-col>
      </el-row>
    </div>
    <el-table ref="multipleTable" :data="orderList.orders" border class="table-spacing">
      <el-table-column prop="id" label="订单编号" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderPlaceTime" label="提交时间" width="250"></el-table-column>
      <el-table-column prop="orderPrice" label="订单金额" width="250" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orderPayment" label="支付方式" width="175" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ mapOrderPayment(scope.row.orderPayment) }}
        </template>
      </el-table-column>
      <el-table-column label="订单来源" width="150" show-overflow-tooltip>APP订单</el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="90" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ mapOrderStatus(scope.row.orderStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <!-- <el-link type="primary" @click="edit(scope.row)">查看订单</el-link> -->
          <el-button type="text" size="mini" @click="manageShop(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { selectCommonUsers, selectCommonUsersCard, selectCommonUsersAddress, selectCommonUsersOrder } from '@/api/keep/commonUsers';

export default {
  data() {
    return {
      dataList: {},
      cardList: {},
      addressList: {},
      orderList: {},
      leftColumnData: [],
      rightColumnData: [],
    };
  },
  methods: {
    queryUserInfo() {
      const id = this.$route.query.id;
      if (id) {
        selectCommonUsers(id)
          .then((response) => {
            this.dataList = response.data[0];
            console.log(this.dataList)
            this.formatTableData();
          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    formatTableData() {
      const allData = [
        { label: '用户ID', value: this.dataList.id },
        { label: '昵称', value: this.dataList.nickname },
        { label: '生日', value: this.dataList.birthday },
        {
          label: '性别',
          value: this.dataList.gender === '0' || this.dataList.gender === 0
            ? '男'
            : this.dataList.gender === '1' || this.dataList.gender === 1
              ? '女'
              : '未知',
        },
        { label: '职业', value: this.dataList.occupation },
        { label: '手机', value: this.dataList.mobile },
        { label: '健身经验', value: this.dataList.gymExperiences && this.dataList.gymExperiences[0] ? this.dataList.gymExperiences[0].labelname : '' },
        { label: '城市', value: this.dataList.city },
        { label: '健身目的', value: this.dataList.userPurposeMiddles && this.dataList.userPurposeMiddles[0] ? this.dataList.userPurposeMiddles[0].fitnessPurposes.purposesname : '' },
      ];

      const midIndex = Math.ceil(allData.length / 2);
      this.leftColumnData = allData.slice(0, midIndex);
      this.rightColumnData = allData.slice(midIndex);
    },
    queryUserCardInfo() {
      const id = this.$route.query.id;
      if (id) {
        selectCommonUsersCard(id)
          .then((response) => {
            this.cardList = response.data;
          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    queryUserAddressInfo() {
      const id = this.$route.query.id;
      if (id) {
        selectCommonUsersAddress(id)
          .then((response) => {
            this.addressList = response.data;
          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    queryUserOrderInfo() {
      const id = this.$route.query.id;
      if (id) {
        selectCommonUsersOrder(id)
          .then((response) => {
            this.orderList = response.data;
console.log(this.orderList)
          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    mapOrderStatus(status) {
      switch (status) {
        case 0:
          return '待支付';
        case 1:
          return '已支付';
        case 2:
          return '已完成';
          case 3:
            return '退款中';
            case 4:
              return '已退款';
        default:
          return '未知状态';
      }
    },
    mapOrderPayment(payment) {
      switch (payment) {
        case 0:
          return '微信支付';
        case 1:
          return '充值卡';
        case 2:
          return '次数卡';
        default:
          return '未知支付方式';
      }
    },
    edit(row) {
      console.log('查看订单: ', row);
    },
    manageShop(row) {

      console.log('Navigating to order with ID:', row.id);
     this.$router.push({ path: `/myOrder`, query: { id: row.id } });

    }
  },

  mounted() {
    this.queryUserInfo();
    this.queryUserCardInfo();
    this.queryUserAddressInfo();
    this.queryUserOrderInfo();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20px;
}

.profile-picture {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
}

.user-info {
  text-align: center;
}

.user-id {
  font-size: 18px;
  margin: 10px 0;
  font-weight: bold;
}

.membership-status {
  background-color: #e74c3c;
  color: white;
}

.details-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
}

.details-column {
  width: 48%;
}

.detail-row {
  margin-bottom: 10px;
}

.label-col {
  text-align: right;
  font-weight: bold;
  color: #606266;
}

.value-col {
  padding-left: 10px;
  line-height: 28px;
}

.table-header {
  background-color: #e8e8e8;
  margin-top: 10px;
  margin-bottom: 0;
}

.table-spacing {
  margin-top: 0px;
}

.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
